{% load i18n %}
{% load static %}
{% load admin_urls %}
{% load admin_list %}
{% load simpletags %}

<div class="actions">
  <input type="hidden" name="action" value=""/>

  {% if has_add_permission %}
    {% url cl.opts|admin_urlname:'add' as add_url %}
    <el-button type="primary" size="mini" icon="el-icon-plus" url="{% add_preserved_filters add_url is_popup to_field %}">
      {% trans 'Add' %}
    </el-button>
  {% endif %}

  {% for field in action_form.fields.action.choices %}
    {% if field.0 %}
      {% if field.0 == 'delete_selected' %}
        <el-button type="danger" data-name="{{ field.0 }}" size="mini" icon="el-icon-delete" @click="delSelected('{{ field.0 }}')">{% trans 'Delete' %}</el-button>
      {% else %}
        <input type="hidden" name="select_across" v-model="select_across" value="0" class="select-across">
        <input type="hidden" name="file_format" v-model="file_format">
          {% if field.0 == 'export_admin_action' %}
            <el-select filterable v-model="file_format" size="mini" style="width: 90px;margin-right: 8px;">
              <el-option v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
              </el-option>
            </el-select>
            <el-button size="mini" data-name="{{ field.0 }}">{{ field.1 }}</el-button>
          {% else %}
              <el-button :icon="customButton.{{ field.0 }}.icon"
                         :style="customButton.{{ field.0 }}.style"
                         :type="customButton.{{ field.0 }}.type"
                         data-name="{{ field.0 }}"
                         size="mini">
                {{ field.1 }}
              </el-button>
          {% endif %}
        {% endif %}
    {% endif %}
  {% endfor %}

  {% if cl.formset and cl.result_count %}
    <input type="hidden" name="_save" value="{% trans 'Save' %}"/>
    <el-button icon="el-icon-circle-check" type="success" @click="formSubmit()">{% trans 'Save' %}</el-button>
  {% endif %}

  <el-button size="mini" data-name="delete_selected" v-for="item in exts" :key="item.name" @click="extClick(item)">
    <span v-text="item.name"></span>
  </el-button>

  {% block actions-counter %}
    {% if actions_selection_counter %}
      <span class="action-counter" data-actions-icnt="{{ cl.result_list|length }}"> {{ selection_note }} </span>
        {% if cl.result_count != cl.result_list|length %}
          <span class="all">{{ selection_note_all }}</span>
          <span class="question">
            <a href="#" title="{% trans "Click here to select the objects across all pages" %}">
              {% blocktrans with cl.result_count as total_count %}
                Select all {{ total_count }} {{ module_name }}
              {% endblocktrans %}
            </a>
          </span>
          <span class="clear">
            <a href="#" onclick="unSelect()">{% trans "Clear selection" %}</a>
          </span>
        {% endif %}
    {% endif %}
  {% endblock %}

  <el-button-group class="btn-group">
    <a @click="searchDisplay()" class="el-button el-button--mini is-circle"><span class="el-icon-search"></span></a>
    <a @click="reload()" class="el-button el-button--mini is-circle"><span class="el-icon-refresh"></span></a>
    <a @click="openNewPage()" class="el-button el-button--mini is-circle"><span class="el-icon-news"></span></a>
  </el-button-group>
</div>
<script type="text/javascript" src="{% static '/admin/simpleui-x/automatic/dicts.js' %}"></script>
<script type="text/javascript" src="{% static '/admin/simpleui-x/automatic/segment.js' %}"></script>
<script type="text/javascript">
  const _action = new Vue({
    el: '.actions',
    data: {
      select_across: 0,
      file_format: 1,
      show:true,
      options: [{
          value: 0,
          label: 'csv'
      }, {
          value: 1,
          label: 'xls'
      }, {
          value: 2,
          label: 'xlsx'
      }, {
          value: 3,
          label: 'tsv'
      }, {
          value: 4,
          label: 'ods'
      }, {
          value: 5,
          label: 'json'
      }, {
          value: 6,
          label: 'yaml'
      }, {
          value: 7,
          label: 'html'
      }],
      customButton: {% autoescape off %}{% custom_button %}{% endautoescape %},
      exts:[]
    },
    created(){
        if (localStorage && typeof (localStorage.searchStatus) != 'undefined') {
            this.show = localStorage.searchStatus === 'true';
        }
    },
    watch:{
        'show':function(newValue){
            let obj = document.querySelector('.xfull');
            if(!newValue){
                //隐藏
                document.getElementById('toolbar').style.display = 'none';
                if(obj) {
                    obj.style.display = 'none';
                }
            }else{
                //显示
                document.getElementById('toolbar').style.display = 'inherit';
                if(obj){
                    obj.style.display = 'inherit';
                }
            }
            if(localStorage){
                localStorage['searchStatus']=newValue;
            }
        }
    },
    methods: {
        searchDisplay:function(){
            this.show = !this.show;
        },
        reload:function(){
          window.location.reload()
        },
        openNewPage:function(){
            window.open(window.location.href)
        },
        getIcon:getIcon,
        extClick:function(item){
          window.location.href=item.url;
        },
        formSubmit: function () {
            $("#changelist-form").submit();
        },
        delSelected: function (name) {

            $("#changelist-form input[name='action']").val(name);

            $("#changelist-form [name='_save']").removeAttr('name');

            $("#changelist-form [name!='']").each(function () {
                var obj = $(this);
                if (obj.attr('name') && obj.attr('name').indexOf('form-') == 0) {
                    obj.removeAttr('name');
                }
            });


            var self=this;
            function showMessage(msgs){
                msgs.forEach(item => {
                    this.$notify({
                        title: getTranslate('Tips'),
                        message: item.msg,
                        type: item.tag,
                        dangerouslyUseHTMLString: true
                    });
                });
            }


            //#67 #66 修复删除问题，改为弹出确认

            this.$confirm(getTranslate('Are you sure you want to delete the selected?'))
              .then(_ =>{
                    $.ajax({
                        type: "POST",//方法类型
                        url: "",//url
                        data: $("#changelist-form").serialize()+'&post=yes',
                        success: function (result) {
                            var msgs = $(result).find('#out_message').html().replace('var messages=', '');
                            showMessage.call(self,JSON.parse(msgs));
                            setTimeout(() => {
                                window.location.reload();
                            }, 1000);
                        },
                        error: function () {
                             this.$notify({
                                title: getTranslate('Tips'),
                                message: 'Network error',
                                type: 'error',
                                dangerouslyUseHTMLString: true
                            });
                        }
                    });
              }).catch(_ =>{

            });
        }
    }
  });

  function selectAll() {
      _action.select_across = 1;
  }

  function unSelect() {
      _action.select_across = 0;
  }

  $(function () {
      $(".actions button[data-name!='delete_selected']").click(function () {
          const url = $(this).attr("url");
          if (url) {
              window.location.href = url;
          } else if ($(this).attr('data-name')) {
              const name = $(this).attr("data-name");
              $("#changelist-form input[name='action']").val(name);

              $("#changelist-form [name='_save']").removeAttr('name');

              $("#changelist-form [name!='']").each(function () {
                  const obj = $(this);
                  if (obj.attr('name') && obj.attr('name').indexOf('form-') == 0) {
                      obj.removeAttr('name');
                  }
              });
              $("#changelist-form").submit();
          } else {
              $("#changelist-form").submit();
          }
      });
  });
</script>
